@CHARSET "UTF-8";

.triangle-up {
		    width: 0;
		    height: 0;
		    border-left: 50px solid transparent;
		    border-right: 50px solid transparent;
		    border-bottom: 100px solid red;
		}
		.triangle-down {
		    width: 0;
		    height: 0;
		    border-left: 50px solid transparent;
		    border-right: 50px solid transparent;
		    border-top: 100px solid red;
		}
		.pHeight{
			height:10px;
		}
		.triangle-left {
		    width: 0;
		    height: 0;
		    border-top: 50px solid transparent;
		    border-right: 100px solid red;
		    border-bottom: 50px solid transparent;
		}
		.triangle-right {
		    width: 0;
		    height: 0;
		    border-top: 50px solid transparent;
		    border-left: 100px solid red;
		    border-bottom: 50px solid transparent;
		}
		.triangle-topleft {
		    width: 0;
		    height: 0;
		    border-top: 100px solid red;
		    border-right: 100px solid transparent;
		}
		.triangle-topright {
		    width: 0;
		    height: 0;
		    border-top: 100px solid red;
		    border-left: 100px solid transparent; 
		}
		.triangle-bottomleft {
		    width: 0;
		    height: 0;
		    border-bottom: 100px solid red;
		    border-right: 100px solid transparent;
		}
		.triangle-bottomright {
		    width: 0;
		    height: 0;
		    border-bottom: 100px solid red;
		    border-left: 100px solid transparent;
		}

		.reposition{
			position:relative;
		}
		.pos1{
			position:absolute;
    		left: 920px;
    		z-index:10;
		}
		.circle1{
			width: 50px;
		    height: 50px;
		   	border-radius:25px;
		   	background:blue;
		   	border:blue;
		}

		.pos2{
			position: absolute;
    		top: 20px;
   			left: 895px;
		}
		.pos3{
			position:absolute;
			top: 90px;
    		left: 870px;
		}
		.pos4{
			position:absolute;
			top: 90px;
    		left: 970px;
		}
		.triangle-up1{
			width: 0;
		    height: 0;
		    border-left: 48px solid transparent;
		    border-right: 48px solid transparent;
		    border-bottom: 93px solid #fff;
    		position: absolute;
   			top: 25px;
    		left: 897px;
		}		